<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0412-05 试试写个椭圆转圈的太阳系</title>
    <style>
        html{
            height: 100%;
        }
        body{
            background: #000;
            height: 100%;
            transform-style: preserve-3d;
            perspective: 500px;
        }
        @keyframes gun {
            0%{
                transform:translate(-50%,-50%) rotate(0deg) ;
            }
            100%{
                transform:translate(-50%,-50%) rotate(360deg) ;
            }
        }
        div{
            transform-style:preserve-3d;
        }
        div,div:before,.main{
            position: absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            border-radius:50%;
        }
        div:before{
            box-shadow: 0 0 ;
        }
        .main{
            transform-origin: center center;
            /*height:600px;*/
            width: 100%;
            transform:translate(-50%,-50%) rotateX(50deg) ;
            animation: da 20s linear infinite;
            transform-style: preserve-3d;
        }
        @keyframes da {
            0%{
                transform:translate(-50%,0%) rotateX(0deg) rotateY(0deg) ;
            }
            100%{
                transform:translate(-50%,0%) rotateX(0deg) rotateY(360deg) ;
            }
        }

        .yi{
            background-color: yellow;
            width: 70px;
            height: 70px;
            animation:gun23 10s linear infinite
        }
        .er{
            width: 150px;
            height: 150px;
            border: 1px solid #fff;
            animation:gun 3s linear infinite
        }
        .er:before{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: blue;
            left:0;
            top:50%;animation:gun22 .5s linear infinite;

        }

        .moon{
            width: 50px;
            height: 50px;
            border: 1px solid rgba(255,255,255,.4);
            left:0;
            top:50%;
            position: absolute;
            animation:gun 6s linear infinite

        }


        .moon:before{
            content: '';
            width: 10px;
            height: 10px;
            background-color: #fff;
            left:0;
            top:50%;
            position: absolute;animation:gun22 .5s linear infinite;

        }
        .san{
            width: 300px;
            height: 300px;
            border: 1px solid #fff;
            top:50%;
            position: absolute;
            animation:gun 8s linear infinite

        }
        .san:before{
            content: '';
            width: 30px;
            height: 30px;
            background-color: red;
            left:0;
            top:50%;
            position: absolute;animation:gun22 .5s linear infinite;
        }
        .si{
            width: 500px;
            height: 500px;
            border: 1px solid #fff;
            top:50%;
            position: absolute;
            animation:gun 10s linear infinite

        }
        .si:before,.si:after{
            content: '';
            width: 60px;
            height: 60px;
            background-color: purple;
            left:0;
            top:50%;
            position: absolute;
            animation:gun22 .4s linear infinite;
        }
        .si:after{
            animation-delay:.2s;
            animation:gun23 .4s linear infinite;
            background-color: #purple;
            border-radius:50%
        }
        @keyframes gun23 {
            0%{
                transform:translate(-50%,-50%) rotateY(360deg);
            }
            100%{
                transform:translate(-50%,-50%) rotateY(180deg);
            }
        }
        @keyframes gun22 {
            0%{
                transform:translate(-50%,-50%) rotateY(0deg);
            }
            100%{
                transform:translate(-50%,-50%) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="main">
    <div class="yi"></div>
    <div class="er">
        <div class="moon"></div>
    </div>
    <div class="san"></div>
    <div class="si"></div>
</div>


</body>
</html>